<template>
  <div class="content">
    <div class="p-2">
      <card-view mb-10px title="基本信息">
        <template v-slot:end>
          <el-button type="primary" @click="backAction">返回</el-button>
        </template>
        <el-form
          ref="basicFormRef"
          :model="form"
          label-position="top"
          inline
          :rules="rules"
        >
          <el-form-item label="单据编号">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.codeNo) }}
            </div>
          </el-form-item>
          <el-form-item label="单据类型">
            <div class="form-view-item">
              <dict-tag
                :options="accept_type"
                :value="processTransferDetails.orderType"
              />
            </div>
          </el-form-item>
          <el-form-item label="业务组织">
            <div class="form-view-item">
              {{
                blankAttributeDefault(processTransferDetails.organizationName)
              }}
            </div>
          </el-form-item>
          <el-form-item label="委外工序转移单号">
            <div class="form-view-item">
              {{
                blankAttributeDefault(processTransferDetails.outsourceCodeNo)
              }}
            </div>
          </el-form-item>
          <el-form-item label="工序任务单号">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.processCodeNo) }}
            </div>
          </el-form-item>
          <el-form-item label="单据状态">
            <div class="form-view-item">
              <dict-tag
                :options="data_status"
                :value="processTransferDetails.dataStatus"
              />
            </div>
          </el-form-item>
          <el-form-item label="业务日期" prop="businessDate">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.businessDate) }}
            </div>
          </el-form-item>
          <el-form-item label="供应商">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.supplierName) }}
            </div>
          </el-form-item>
          <el-form-item label="转出位置">
            <div class="form-view-item">
              {{
                blankAttributeDefault(
                  processTransferDetails.transferOutLocation
                )
              }}
            </div>
          </el-form-item>
          <el-form-item label="备注">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.remark) }}
            </div>
          </el-form-item>
        </el-form>
      </card-view>
      <card-view mb-10px title="物料明细">
        <el-table ref="tableRef" :data="matterList" border>
          <el-table-column
            type="selection"
            fixed="left"
            align="center"
            width="55"
          />
          <el-table-column label="序号" align="center" width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.matterFullCode) }}
            </template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.matterName) }}
            </template>
          </el-table-column>
          <el-table-column label="助记码" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.matterMnemonicCode) }}
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.matterSpecModel) }}
            </template>
          </el-table-column>
          <el-table-column label="表面" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.surfaceName) }}
            </template>
          </el-table-column>
          <el-table-column label="材质" align="center" width="150">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.matterMaterialQuality) }}
            </template>
          </el-table-column>
          <el-table-column label="批号" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.lotNumber) }}
            </template>
          </el-table-column>
          <el-table-column label="单轨长度(mm)" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.monorailLength) }}
            </template>
          </el-table-column>
          <el-table-column label="滑块数量" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.sliderNum) }}
            </template>
          </el-table-column>
          <el-table-column label="滑块总数量" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.sliderAllNum) }}
            </template>
          </el-table-column>
          <el-table-column
            label="导轨销售总长度(mm)"
            align="center"
            width="180"
          >
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.monorailAllLength) }}
            </template>
          </el-table-column>
          <el-table-column label="转出数量" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.rollOutNums) }}
            </template>
          </el-table-column>
          <el-table-column label="计量单位" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.unitName) }}
            </template>
          </el-table-column>
          <el-table-column label="辅助数量" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.assistNums) }}
            </template>
          </el-table-column>
          <el-table-column label="辅助单位" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.assistUnitName) }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" width="180">
            <template #default="scope">
              {{ blankAttributeDefault(scope.row.matterRemark) }}
            </template>
          </el-table-column>
        </el-table>
      </card-view>
      <card-view mb-10px title="转出信息">
        <el-form ref="basicFormRef" :model="form" label-position="top" inline>
          <el-form-item label="生产组织">
            <div class="form-view-item">
              {{
                blankAttributeDefault(
                  processTransferDetails.productionOrganizationName
                )
              }}
            </div>
          </el-form-item>
          <el-form-item label="生产车间">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.workshopName) }}
            </div>
          </el-form-item>
          <el-form-item label="工序">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.processName) }}
            </div>
          </el-form-item>
          <el-form-item label="工序说明">
            <div class="form-view-item">
              {{
                blankAttributeDefault(
                  processTransferDetails.processingInstructions
                )
              }}
            </div>
          </el-form-item>
          <el-form-item label="转出人">
            <div class="form-view-item">
              {{ blankAttributeDefault(processTransferDetails.userOutName) }}
            </div>
          </el-form-item>
        </el-form>
      </card-view>
      <card-view mb-10px title="制单信息">
        <document-view :list="documentList" />
      </card-view>
    </div>
  </div>
</template>

<script setup>
import CardView from "@/components/CardView/index.vue";
import DocumentView from "@/components/DocumentView/index.vue";
import DictTag from "@/components/DictTag/index.vue";
import { blankAttributeDefault } from "@/utils/index";

import defineStore from "@/store/modules/dict";

import { getTransferOutDetailsApi } from "@/api/details";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();
const { data_status, accept_type } = toRefs(
  proxy?.useDict("data_status", "accept_type")
);
const route = useRoute();
const router = useRouter();
onMounted(() => {
  getProcessTransferDetails(route.params.id);
});

const form = ref({});

// 物料列表
const matterList = ref([]);

// 计划单详情
const processTransferDetails = ref({});
const getProcessTransferDetails = async (id) => {
  const res = await getTransferOutDetailsApi(id);
  processTransferDetails.value = res.data;
  processTransferDetails.value.organizationId = String(res.data.organizationId);
  processTransferDetails.value.orderType = String(res.data.orderType);
  processTransferDetails.value.dataStatus = String(res.data.dataStatus);
  processTransferDetails.value.productionOrganizationId = String(
    res.data.productionOrganizationId
  );
  form.value = res.data;
  documentInfoCreate(res.data);

  // 物料明细
  const matter = {};
  Object.assign(matter, res.data);
  matterList.value = [];
  matterList.value.push(matter);
};

/** 制单信息 */
const documentList = ref([]);
const documentInfoCreate = (details) => {
  let list = [];
  // 制单人
  let cteateInfo = {
    titleTop: "制单人",
    infoTop: details?.createName,
    titleBottom: "创建时间",
    infoBottom: details?.createTime,
  };
  list.push(cteateInfo);

  // 修改人
  let updateInfo = {
    titleTop: "修改人",
    infoTop: details?.updateName,
    titleBottom: "修改时间",
    infoBottom: details?.updateTime,
  };
  list.push(updateInfo);

  // 审核人
  let checkInfo = {
    titleTop: "审核人",
    infoTop: details?.checkName,
    titleBottom: "审核时间",
    infoBottom: details?.checkTime,
  };
  list.push(checkInfo);
  documentList.value = list;
  console.log(documentList.value);
};
documentInfoCreate();
/** 返回 */
const backAction = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped></style>
